<template>
  <div id="home">
    <div>
      <Lunbo />
      <Year />
    </div>
    <div id="center">
      <Pinlei :text="futext"/>
      <main >
        <section v-for="(v, i) in 3" :key="i">
          <h2>新年唇色 好运加特</h2>
          <button @click="fun('One')">新年开运名片</button>
          <button @click="fun('Two')">名片[唇纱]</button>
          <button @click="fun('Three')">名片[水光唇露]</button>
          <component :is="com"></component>
        </section>
      </main>
    </div>

   <div id="zong"> 
      <Zong/>
   </div>
  </div>
</template>

<script>
import Lunbo from "@/components/homem/lunbo.vue";
import Year from "@/components/homem/year.vue";
import One from "@/components/homem/one.vue";
import Two from "@/components/homem/two.vue";
import Three from "@/components/homem/three.vue";

import Pinlei from "@/components/homem/pinlei.vue";
import Zong from '@/components/zong.vue';
export default {
  components: {
    Lunbo,
    Year,
    One,
    Three,
    Two,

    Pinlei,
    Zong,
  },

  methods: {
    fun(data) {
      this.com = data;
    },
  },
  data() {
    return {
      com: "One",
      futext:"拍下立减20元"
    };
  },
};
</script>

<style scoped>
#zong{
    position: fixed;
  bottom: 0;
}
#center {
  height: 5.4rem;
  display: flex;
  flex-direction: column;
  width: 100%;
}
section {
  width: 100%;
  text-align: center;
  background-color: rgb(153, 8, 8);
}
button {
  border: none;
  height: 0.3rem;
  width: 33%;
  background-color: rgb(153, 8, 8);
  color: white;
}
h2 {
  color: white;
  height: 0.4rem;
  padding-top: 0.3rem;
}
</style>